<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>添加评价 - 助农购物网站</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/logo/favicon.ico">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .rating-stars {
            font-size: 30px;
            color: #ffc107;
            cursor: pointer;
        }
        .rating-stars .star {
            margin-right: 5px;
        }
        .rating-stars .star:hover {
            color: #ffb300;
        }
    </style>
</head>
<body>
    <jsp:include page="../common/header.jsp"/>
    
    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h3>添加商品评价</h3>
                    </div>
                    <div class="card-body">
                        <c:if test="${error != null}">
                            <div class="alert alert-danger">${error}</div>
                        </c:if>
                        
                        <c:if test="${message != null}">
                            <div class="alert alert-info">${message}</div>
                        </c:if>
                        
                        <c:if test="${order != null}">
                            <form action="${pageContext.request.contextPath}/client/review?action=add" method="post">
                                <input type="hidden" name="action" value="add">
                                <input type="hidden" name="orderId" value="${order.orderId}">
                                
                                <div class="mb-3">
                                    <label class="form-label">订单编号</label>
                                    <input type="text" class="form-control" value="${order.orderNo}" readonly>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">商品ID</label>
                                    <c:if test="${order.orderItems != null && !empty order.orderItems}">
                                        <select name="productId" class="form-select" required>
                                            <c:forEach var="item" items="${order.orderItems}">
                                                <option value="${item.productId}">${item.productName}</option>
                                            </c:forEach>
                                        </select>
                                    </c:if>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">评分</label>
                                    <div class="rating-stars" id="ratingStars">
                                        <span class="star" data-rating="1">☆</span>
                                        <span class="star" data-rating="2">☆</span>
                                        <span class="star" data-rating="3">☆</span>
                                        <span class="star" data-rating="4">☆</span>
                                        <span class="star" data-rating="5">☆</span>
                                    </div>
                                    <input type="hidden" name="rating" id="rating" value="5" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="content" class="form-label">评价内容</label>
                                    <textarea class="form-control" id="content" name="content" rows="5" 
                                              placeholder="请输入您的评价..." required></textarea>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="images" class="form-label">评价图片（多个URL用逗号分隔）</label>
                                    <input type="text" class="form-control" id="images" name="images" 
                                           placeholder="https://example.com/image1.jpg,https://example.com/image2.jpg">
                                    <small class="form-text text-muted">多个图片URL请用逗号分隔</small>
                                </div>
                                
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary">提交评价</button>
                                    <a href="${pageContext.request.contextPath}/client/order?action=list" class="btn btn-secondary mt-2">返回订单列表</a>
                                </div>
                            </form>
                        </c:if>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
    <script>
        // 评分星级交互
        const stars = document.querySelectorAll('.star');
        const ratingInput = document.getElementById('rating');
        
        stars.forEach((star, index) => {
            star.addEventListener('click', function() {
                const rating = index + 1;
                ratingInput.value = rating;
                updateStars(rating);
            });
            
            star.addEventListener('mouseenter', function() {
                const rating = index + 1;
                updateStars(rating);
            });
        });
        
        document.getElementById('ratingStars').addEventListener('mouseleave', function() {
            const currentRating = parseInt(ratingInput.value);
            updateStars(currentRating);
        });
        
        function updateStars(rating) {
            stars.forEach((star, index) => {
                if (index < rating) {
                    star.textContent = '★';
                } else {
                    star.textContent = '☆';
                }
            });
        }
        
        // 初始化显示5星
        updateStars(5);
    </script>
</body>
</html>





